<script setup lang="ts">
defineOptions({
  name: "Result"
});
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getReport } from "@/api/report";
const route = useRoute();
const router = useRouter();

onMounted(async () => {
  const res = await getReport(route.params.id);
  console.log(res);
  tableData.value = res.data;
});
const tableData = ref([]);

const handleClick = ({ id }) => {
  router.push("/result/report?id=" + id);
};
</script>

<template>
  <div>
    <h3 class="mb-4">{{ $route.params.id }}</h3>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" label="序号" width="100" />
      <el-table-column label="姓名">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click="handleClick(scope.row)"
            >{{ scope.row.name }}</el-button
          >
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="手机号" />
      <el-table-column prop="视觉" label="视觉" />
      <el-table-column prop="听觉" label="听觉" />
      <el-table-column prop="动觉" label="动觉" />
      <el-table-column prop="自语" label="自语" />
      <el-table-column prop="visual" label="visual" />
      <el-table-column prop="digital" label="digital" />
      <el-table-column prop="kinesthetic" label="kinesthetic" />
      <el-table-column prop="auditory" label="auditory" />
      <!-- <el-table-column prop="mx" label="mx" />
      <el-table-column prop="total" label="total" /> -->
    </el-table>
  </div>
</template>
